<template>
  <div>
    <h1>index3</h1>
    <button @click="changeMap">切换地图数据</button>
    <div class="mapContainer" id="mapContainer" ref="mapContainerRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";
import 'echarts-gl'
import 'echarts-liquidfill'

import useEchartMapOption from "./use-echart-map-option-geo3D";
import mockData from "./mockTimerData"


let myChart;
const mapName = "guangzhou"; // map3
const mapContainerRef = ref(null);
let timeTicket: any = null;
var count = 0;
const timeNumber = 1000


// 外部配置项
const setting = {
  zoom: 1,
  roam: true,
  labelStyle: {
    fontSize: 20
  },
  data: mockData
}

const init = async () => {
  myChart = echarts.init(mapContainerRef.value);

  // const mapName = "china"; // map1
  const { getOption, updateOption } = useEchartMapOption(mapName)
  const option = getOption(setting);
  const chinaGeoJson = await getMapData(mapName);
  // option.series[0].
  // option.geo[0].data = chinaGeoJson

  console.log("option", option);
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  myChart.setOption(option);

//   setTimeout(() => {
//     option.series[1].tooltip.formatter = function (param) {
//       return getShowTooltipData(param);
//     };
//     /**
//  * 用于展示tooltip的数据提示内容
//  * @param paramData tooltip数据
//  */
//     function getShowTooltipData(paramData) {
//       // 定义要排除的字段
//       const excludeKeys = ["value", "itemStyle"];
//       const dataInfo = paramData.data;
//       // 获取弹窗内容
//       const popupContent = getPopupContent(dataInfo, excludeKeys);
//       console.log("展示信息", popupContent);
//       return popupContent;

//       // 生成弹窗内容
//       function getPopupContent(data, excludeKeys) {
//         let popupContent = "";
//         for (let key in data) {
//           if (!excludeKeys.includes(key)) {
//             popupContent += `<div>${data[key]}</div>`;
//             // popupContent += `<div>${key}: ${data[key]}</div>`;
//           }
//         }
//         return popupContent.trim();
//       }
//     }
//     myChart.setOption(option);
//   }, 1000);

  // updateOption({
  //   option,
  //   myChart
  // })
  // loadTimer()
};


const loadTimer = () => {
  console.log("加载定时器", myChart);
  const { getOption } = useEchartMapOption(mapName)
  const option = getOption(setting);
  // var mapData = option.series[0].data;
  // option.series[0].data.forEach(element => {
  //   element.selected = false
  // });
  console.log("option", option.series);
  // console.log("mapData",mapData);

  var j = 1;
  // var mapData = option.series[0].data;
  var highlightedIndex = 0; // 初始高亮地区的索引
  var count = 0;
  var timeTicket: any = null
  var dataLength = option.series[0].data.length;


  console.log("dataLength", dataLength);

  // 使用setInterval方法来实现轮播
  // 轮播数据
  var data = [
    { name: "天河区", value: 200 },
    { name: "荔湾区", value: 200 },
  ];
  var currentIndex = 0;
  let n = 0
  //   每隔5秒高亮显示一个城市的数据
  setInterval(() => {
    return
    if (data.length > 0) {
      // updateColors(areaColor[n]);
      if (n === data.length) {
        n = 0
      }
      // console.log('n', n, data[n])
      updateColors(data[n].name)
      n++
      function updateColors(name) {
        option.geo3D.regions = [
          {
            name,
            itemStyle: {
              color: 'green'
            }
          }
        ]
        myChart.setOption(option);
      }
    }
    // option.series.forEach((item) => {
    //   item.data = [];
    //   item.data.push(dataList2[j]);
    // });
    // option.geo.regions = [];
    // option.geo.regions.push({
    //   name: dataList2[j].name,
    //   selected: true,
    // });
    // console.log(option.geo);
    // j++;
    // if (j === 13) {
    //   j = 0;
    // }
    // myChart.setOption(option, true);
  }, 2000);

  // let i = 0
  // setInterval(function () {
  //   console.log("更改tooltip内容");

  //   i++
  //   // 更改tooltip内容
  //   myChart.dispatchAction({
  //     type: 'showTip',
  //     seriesIndex: 0,  // 表示第一个系列
  //     dataIndex: i  // i为要显示tooltip的数据索引
  //   });
  //   // 如果需要隐藏之前的tooltip，可以使用下面这行代码
  //   // chart.dispatchAction({type: 'hideTip'});
  // }, 2000);  // 2000表示2秒钟切换一次tooltip内容



  // setInterval(function () {
  // 每次轮播切换数据
  // console.log("每次轮播切换数据")
  // let highlightIndex = count % dataLength
  // console.log('highlightIndex', highlightIndex)

  // myChart.dispatchAction({
  //   type: 'downplay',
  //   seriesIndex: 0
  // })
  // myChart.dispatchAction({
  //   type: 'highlight',
  //   seriesIndex: 0,
  //   dataIndex: 0
  // })
  // myChart.dispatchAction({
  //   type: 'showTip',
  //   seriesIndex: 0,
  //   dataIndex: 0
  // })
  // if (data.length > 0) {
  //   currentIndex = (currentIndex + 1) % data.length;
  //   myChart.setOption({
  //     series: [
  //       {
  //         data: [data[currentIndex]],
  //       },
  //     ],
  //   });
  // }
  // }, 2000);

  // myChart.dispatchAction({
  //   type: 'showTip', // 显示tooltip
  //   seriesIndex: 0, // 要操作的系列的索引
  //   dataIndex: 0, // 要操作的数据的索引
  // });


  // var dataLength = 0
  // timeTicket && clearInterval(timeTicket);
  // timeTicket = setInterval(function () {
  //   console.log("轮播");

  //   myChart.dispatchAction({
  //     type: "downplay",
  //     seriesIndex: 0,
  //   });
  //   myChart.dispatchAction({
  //     type: "highlight",
  //     seriesIndex: 0,
  //     dataIndex: 0
  //   });
  //   myChart.dispatchAction({
  //     type: "showTip",
  //     seriesIndex: 0,
  //     dataIndex: 0
  //   });
  //   count++;
  // }, timeNumber);




  // 设置新的高亮状态
  // mapData[highlightedIndex].selected = true;
  // 重新渲染图表
  // myChart.clear(); // 清空echarts数据
  // myChart.setOption(option);
  // setInterval(function () {
  //   console.log("显示高亮", mapData[highlightedIndex].selected);

  //   // 取消之前的高亮状态
  //   // mapData.forEach(function (item) {
  //   //   item.selected = false;
  //   // });
  //   // 设置新的高亮状态
  //   mapData[highlightedIndex].selected = true;
  //   // // 重新渲染图表
  //   myChart.clear() // 清空echarts数据
  //   myChart.setOption(option);
  //   // // 更新高亮索引，确保在数组范围内循环
  //   console.log("显示",option);

  //   // highlightedIndex = (highlightedIndex + 1) % mapData.length;
  // }, 2000); // 每隔2秒切换一次高亮地区
  // console.log("myChart.dispatchAction", myChart.dispatchAction);
  // myChart.dispatchAction({
  //   type: "highlight",
  //   seriesIndex: 0,
  //   dataIndex: 1,
  // });
  // var dataLength = option.series[0].data.length;
  // timeTicket = setInterval(function () {
  //   myChart.dispatchAction({
  //     type: 'highlight',
  //     seriesIndex: 0,
  //     dataIndex: (count) % 10
  //   });
  //   count++;
  // }, 1000);
}

const changeMap = async () => {
  console.log("切换");
  const mapName = "jiangxi"; // map1
  const chinaGeoJson = await getMapData(mapName);
  const { getOption } = useEchartMapOption(mapName)
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  const option = getOption(setting);
  // option.geo[0].data = chinaGeoJson
  myChart.setOption(option);
  console.log("chinaGeoJson", chinaGeoJson);
}

const getMapData = async (mapName) => {
  const response = await fetch(`./public/data/${mapName}.geojson`); // 请将'china.json'替换为实际的地图数据文件路径
  return await response.json();
};

const changeTooltipSytle = () => {
  // tooltipClass
  setTimeout(() => {
    const tooltipEl = document.querySelector(".tooltipClass")
    console.log("changeTooltipSytle", tooltipEl);
    tooltipEl.style.background = 'red !important'
    // tooltipEl.setAttribute('style', 'background-color: red !important; color: white;');
  }, timeNumber + 1000);
}

onMounted(() => {
  init();
  // changeTooltipSytle();


});
</script>

<style scoped>
.mapContainer {
  width: 1200px;
  height: 800px;
  border: 0.0625rem solid #000;
}

.tooltipClass {}
</style>
